<template>
  <div class="order-detail">
    <!-- 导航栏 -->
    <van-nav-bar
      fixed
      :title="titleText+'订单'"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-cell-group>
      <!-- 收货地址 -->
      <van-cell is-link>
        <div class="reap-address">
          <div class="left">
            <div class="name">{{`${order.sh_user_receive_address.receive_user_name}  ${order.sh_user_receive_address.receive_user_phone}`}}  </div>
            <div class="adress"> {{order.sh_user_receive_address.receive_user_address}}</div>
          </div>
          <div class="right">
            <van-icon name="edit" color="#f93e2e"/>
          </div>
        </div>
        <!-- <reap-address :address="order.sh_user_receive_address"/> -->
      </van-cell>

      <!-- 店铺信息 -->
      <van-cell>
        <shop-item :shopId="order.shop_id"/>
      </van-cell>
      <!-- 选中的商品 -->
      <van-cell>
        <van-card
          v-for="(item,i) in order.sh_goods_goodsorders"
          :key="i"
          :thumb="item.sh_good.goods_image"
          :title="item.sh_good.goods_name"
          :num="item.goods_amount"
          :price="item.goods_price"
        >
        </van-card>
      </van-cell>
      <!-- 活动优惠项 -->
      <van-cell title="活动优惠" is-link></van-cell>
      <!-- 优惠券 -->
      <van-cell title="优惠券" is-link></van-cell>
      <!-- 配送方式 -->
      <van-cell title="配送方式/费用" is-link></van-cell>
      <!-- 合计 -->
      <van-cell>
        <div class="total-price">
          <span>合计</span>
          <span>￥ {{order.order_money}}</span>
        </div>
      </van-cell>
    </van-cell-group>
    <van-button
      color="#f93e2e"
      class="payBtn"
      @click="onClick"
    >
      {{btnText}}
    </van-button>
  </div>
</template>

<script>
// import reapAddress from '@/components/reap-address'
import shopItem from '../../order-confirm/components/shop-item'
import { setOrderState } from '@/api/order'
export default {
  name: 'OrderDetail',
  components: {
    shopItem
  },
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      typeList: [
        { name: '待支付', text: '确认并支付(微信支付)', status: 'unpaid' },
        { name: '待配送', text: '催一催', status: 'undelivery' },
        { name: '待自提', text: '确认已自提', status: 'untake' },
        { name: '待发货', text: '催一催', status: 'unsend' },
        { name: '已收货', text: '再来一单', status: 'take' },
        { name: '待收货', text: '确认收货', status: 'send' },
        { name: '已退款', text: '投诉', status: 'refund' },
        { name: '已取消', text: '重新购买', status: 'cancel' }
      ]
    }
  },
  created () {
    console.log(this.order)
  },
  mounted () {

  },
  computed: {
    btnText() {
      var text = ''
      this.typeList.find(item => {
        if (item.status === this.order.order_state) {
          text = item.text
        }
      })
      return text
    },
    titleText() {
      var text = ''
      this.typeList.find(item => {
        if (item.status === this.order.order_state) {
          text = item.name
        }
      })
      return text
    }
  },
  methods: {
    async onClick() {
      if (this.order.order_state === 'unpaid') {
        const { data: res } = await setOrderState(this.order.goods_order_id, 'unsend')
        this.$emit('close')
        if (res.meta.status !== 200) return this.$toast('支付失败')
        this.$toast('支付成功')
      } else if (this.order.order_state === 'untake') {
        const { data: res } = await setOrderState(this.order.goods_order_id, 'take')
        this.$emit('close')
        if (res.meta.status !== 200) return this.$toast('确认自提失败')
        this.$toast('确认自提成功')
      } else if (this.order.order_state === 'take') {
        this.$router.push('/')
      } else if (this.order.order_state === 'send') {
        const { data: res } = await setOrderState(this.order.goods_order_id, 'take')
        this.$emit('close')
        if (res.meta.status !== 200) return this.$toast('确认收货失败')
        this.$toast('确认收货成功')
      }
    }
  }
}
</script>

<style scoped lang="less">
.order-detail {
  padding: 85px 0;
  .van-nav-bar {
    background: #f93e2e;
  }
  .total-price {
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
  }
  .payBtn {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
}
/deep/.van-nav-bar__title{
  color: #fff
}
/deep/.van-icon-arrow-left {
  color:#fff
}
.reap-address {
  display: flex;
  .left {
    margin-left: 20px;
    margin-right: 20px;
    flex: 9
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 50px;
    flex: 1
  }
}
</style>
